<template>
  <Card class="data-statistic-card" :bordered="false">
    <p slot="title">
      今日实时数据分析
    </p>
    <div class="charts-border2">
      <data-card-count
        style="padding-bottom: 0px;"
        :countWidth="countWidth"
        :cardCountData="cardCountData">
      </data-card-count>

      <data-line-charts-refuel
        v-if="showWho === 'refuel_side'"
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="todayXAxisDataList"
        :yAxisData="yAxisData"
      ></data-line-charts-refuel>

      <data-line-charts-checkout
        v-if="showWho === 'checkout'"
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="todayXAxisDataList"
        :yAxisData="yAxisData"
      ></data-line-charts-checkout>
<!--
      <data-line-charts-checkout2
        v-if="showWho === 'checkout'"
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="todayXAxisDataList"
        :yAxisData="yAxisData"
      ></data-line-charts-checkout2> -->

    </div>
  </Card>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex'

import DataCardCount from "./dataCount";
import DataLineChartsCheckout from "./dataLineChartsCheckout";
import DataLineChartsCheckout2 from "./dataLineChartsCheckout2";
import DataLineChartsRefuel from "./dataLineChartsRefuel";

import dayjs from 'dayjs'
var node_schedule = require("node-schedule");

export default {
  components: {
    DataCardCount,
    DataLineChartsCheckout,
    DataLineChartsCheckout2,
    DataLineChartsRefuel
  },
  data() {
    return {
      countWidth: '260px' // 宽度
    }
  },
  computed: {
    ...mapState([
      'monitorData', // 监控的视频流信息
      'countData', // 便利店统计数据
      'servicePersonsData', // 服务人数
      'enterPersonsData', // 进店人数
      'refuelServiceData', // 加油区相关数据
      'stationCenterCountData',
    ]),
    ...mapGetters([
      'serviceEnterRate', // 便利店服务率，服务人数/进店人数
      'todayXAxisDataList',
      'weekXAxisDataList',
      'dayWeekMonthStartEndTime',
    ]),
    showWho() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        return 'checkout'
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        return 'refuel_side'
      }
    },
    cardCountData() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        this.countWidth = '260px'
        return this.countData
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        this.countWidth = '180px'
        return [
          { title: "服务总车辆数", value: this.refuelServiceData.serviceCarsSum },
          { title: "平均服务时间", value: this.refuelServiceData.serviceArgTime },
          { title: "服务违规率", value: this.stationCenterCountData[1].value }
        ]
      } else if(this.monitorData.reqPlayerInfo.category === 'unload') {
        return [
          { title: "卸油次数", value: this.stationCenterCountData[0].value }
        ]
      } else if(this.monitorData.reqPlayerInfo.category === 'safebox') {
        return [
          { title: "保险柜打开次数", value: this.stationCenterCountData[2].value },
          { title: "钱箱打开次数", value: this.stationCenterCountData[3].value }
        ]
      }
    },
    fakeEnterPersonsData() {
      return this.servicePersonsData.map(ele=>{
        return ele*(Math.random()+1)
      })
    },
    yAxisData() {
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        return [
          { name: '进店人次', data: this.enterPersonsData },
          { name: '服务人次', data: this.servicePersonsData },
          { name: '服务率', data: this.serviceEnterRate }]
      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        return [
          { name: '服务车辆数', data: this.refuelServiceData.serviceCarsData },
          { name: '平均服务时间', data: this.refuelServiceData.avgServiceTimeData }]
      }
    }
  },
  created() {
    this.getStatisticsList()
  },
  mounted() {
    var intervalRightStation = node_schedule.scheduleJob("*/5 * * * * *",() => {
        console.log("实时监控页面实时获取 ------------> 统计数据!")
        this.getStatisticsList()
      }
    )
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log("取消 实时监控页面实时获取 ------------> 统计数据")
      intervalRightStation.cancel();
    })
  },
  methods: {
    ...mapActions([
      'getServiceStatistic', // 获取便利店统计数据
      'getCustomerEnter', // 获取进店人数
      'getNowViolateRate', // 获取违规率
      'getRefuelServiceStatistic', // 获取加油区 服务车辆数和服务时间
      'getStationCenterCountData', // 获取卸油次数，保险柜打开次数，钱箱打开次数
      'getRefuelNowViolateRate', // 获取 加油区实时违规率
    ]),
    getStatisticsList() {
      console.log('数据：', this.monitorData.reqPlayerInfo.category)
      if(this.monitorData.reqPlayerInfo.category === 'checkout' || this.monitorData.reqPlayerInfo.category === 'gate') {
        console.log('查询 便利店相关数据')
        let checkoutParams = {
          group: 'hour',
          interval: "1",
          station: this.monitorData.reqPlayerInfo.station,
          category: 'checkout',
          channel: this.monitorData.reqPlayerInfo.channel,
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          // end_time: this.dayWeekMonthStartEndTime.todayRealTime
          end_time: dayjs().add(1, 'hour').format("YYYY-MM-DD HH:mm:ss")

        }
        console.log('参数：', checkoutParams)
        // 获取便利店统计数据
        this.getServiceStatistic(checkoutParams)
        // 获取进店人数
        this.getCustomerEnter(checkoutParams)
        // 获取违规率
        let violateParams = {
          station: this.monitorData.reqPlayerInfo.station,
          category: 'checkout'
        }
        // 获取便利店违规率
        this.getNowViolateRate(violateParams)

      } else if(this.monitorData.reqPlayerInfo.category === 'refuel_side' || this.monitorData.reqPlayerInfo.category === 'overview') {
        console.log('查询 加油区相关数据')
        let selectedChannel = this.monitorData.reqPlayerInfo.category === 'overview' ? '' : this.monitorData.reqPlayerInfo.channel
        // 获取加油区服务车辆服务时间统计数据
        let refuelParams = {
          group: 'hour',
          interval: "1",
          station: this.monitorData.reqPlayerInfo.station,
          category: "refuel",
          channel: selectedChannel,
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: dayjs().add(1, 'hour').format("YYYY-MM-DD HH:mm:ss")
        }
        this.getRefuelServiceStatistic(refuelParams)

        // 获取加油区违规率
        let refuelViolateParams = {
          station: this.monitorData.reqPlayerInfo.station,
          category: "refuel"
        }
        this.getRefuelNowViolateRate(refuelViolateParams)
      } else if(this.monitorData.reqPlayerInfo.category === 'unload') {
        console.log('查询 卸油口相关数据')
        // 获取中间几项的次数
        let unloadParams = {
          strict: 1, // 严格模式
          group: 'hour',
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: dayjs().add(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
          station: this.monitorData.reqPlayerInfo.station,
          actions: ["开启保险柜", "开启钱箱", "油罐车到达"].join(",")
        }
        this.getStationCenterCountData(unloadParams)

      } else if(this.monitorData.reqPlayerInfo.category === 'safebox') {
        console.log('查询 财务室相关数据')
        // 获取中间几项的次数
        let safeboxParams = {
          strict: 1, // 严格模式
          group: 'hour',
          start_time: this.dayWeekMonthStartEndTime.todayStartTime,
          end_time: dayjs().add(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
          station: this.monitorData.reqPlayerInfo.station,
          actions: ["开启保险柜", "开启钱箱", "油罐车到达"].join(",")
        }
        this.getStationCenterCountData(safeboxParams)
      }
    }
  }
};
</script>

<style lang="less">
.data-statistic-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 40px;
}
.data-statistic-card .ivu-card-head p {
  font-size: 2rem;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: left;
}
.data-statistic-card .ivu-card-body {
  background-color: #01237C;
  padding: 0px;
}
</style>
